<template>
	<view>
		<view class="CCC"></view>
		<view class="content">
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">柱塞上升速度</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts">
				<scroll-view scroll-x="true" class="scroll-x" >
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA">
					</canvas>
					<!--#endif-->
				</scroll-view>
			</view>
		</view>
		<view class="content" >
			<view class="content-B headline-B">
				<view class="headline-A"></view>
				<view class="title">套压降幅</view>
			</view>
		</view>
		<view class="BBB">
			<view class="qiun-charts" >
				<scroll-view scroll-x="true" class="scroll-x" >
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
					<!--#endif-->
				</scroll-view>
			</view>
		</view>
		<view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">负荷系数</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<scroll-view scroll-x="true" class="scroll-x" >
						<!--#ifdef MP-ALIPAY -->
						<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineC" @touchmove="moveLineC" @touchend="touchEndLineC">
						</canvas>
						<!--#endif-->
					</scroll-view>
				</view>
			</view>
		</view>
		<view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">水产差压</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<scroll-view scroll-x="true" class="scroll-x" >
						<!--#ifdef MP-ALIPAY -->
						<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineD" @touchmove="moveLineD" @touchend="touchEndLineD">
						</canvas>
						<!--#endif-->
					</scroll-view>
				</view>
			</view>
		</view>
		<view>
			<view class="content">
				<view class="content-B headline-B">
					<view class="headline-A"></view>
					<view class="title">柱塞上行速度</view>
				</view>
			</view>
			<view class="BBB">
				<view class="qiun-charts">
					<scroll-view scroll-x="true" class="scroll-x2" >
						<!--#ifdef MP-ALIPAY -->
						<canvas canvas-id="canvasLineE" id="canvasLineE" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineE" @touchmove="moveLineE" @touchend="touchEndLineE">
						</canvas>
						<!--#endif-->
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Loading1 from "@/compoents/loading11.vue";
	import uCharts from '@/js_sdk/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	import { timeTrans } from '@/js_sdk/u-charts/time.js'
	var _self;
	var canvaLineA=null;
	var canvaLineB=null;
	var canvaLineC=null;
	var canvaLineD=null;
	var canvaLineE=null;
	var lastMoveTime2=null
	var lastMoveTime=null;//最后执行移动的时间戳
	var lastMoveTime3=null
	var lastMoveTime4=null
	var lastMoveTime5=null
	export default {
		components:{
			Loading1,
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				itemCount:4,
				textarea:'',
				Interactive:'',//交互显示的数据
				startDate: '',
				endDate: '',
				step: '',
				tempAxis:[],
				tempAxis2:[],
				tempAxis3:[],
				tempAxis4:[],
				tempAxis5:[],
				yAxis1:[],
				yAxis2:[],
				yAxis3:[],
				yAxis4:[],
				yAxis5:[],
				waterAxis:'',
				wateryAxis:'',
				gasyAxis:'',
				waringText:[],
				mode:'',
				currentOpenWellTime:'',
				currentCloseWellTime:'',
				currentStatus:'',
				countdownTime:'',
				
				waterAxisMax:'',
				pressureAxisMax:'',
				
				headerUrl:{
					//intranet:'http:/'+'/'+'127.0.0.1:9011/',
					intranet:'http:/'+'/'+'10.89.67.239:9011/',
					local:'http:/'+'/'+'10.89.67.239:9115/',
					realTime:'http:/'+'/'+'10.89.67.239:9007/',
					local2:'http:/'+'/'+'127.0.0.1:8001/',
				},
				
				loadingA:'',
				loadingB:'',
				JS:0,
				ty:0,
				// 柱塞上行曲线
				sxChartData: {
				  wellName: this.$route.params.name,
				  firstyAxisData: [],
				  xAxisData: [],
				  axisName: ['柱塞上行速度'],
				  yAxisName: '柱塞上行速度(m/s)',
				  maxValue: '',
				  minValue: ''
				},
			}
		},
			
		onLoad(option) {
			_self = this;
			/* console.log("0000000000000");
			console.log(option); */
			/* this.getWarning(option.well_id);
			this.getTitie(option.well_name);
			this.getZszt(option.well_id); */
			this.getWellJsTy(option.well_id);
			this.getServerData(option.well_id);
			/* this.getWaterData(option.well_id); */
			this.cWidth=uni.upx2px(700);
			this.cHeight=uni.upx2px(400);
			//this.tbjz();
			//console.log(option)
		},
	
		methods: {
			// 300)以内
			      zsSxOne(){
			        let len = 300/20
			        let c = []
			        for (let i = 0; i < len; i++) {
			          c[i] = ((-0.0377*(i*20)+14.5)*(1-0.05*(_self.ty-10))).toFixed(2)
			        }
			        _self.sxChartData.firstyAxisData = _self.sxChartData.firstyAxisData.concat(c)
					_self.yAxis5=_self.sxChartData.firstyAxisData
			      },
			
			      // [300-2100)
			      zsSxTwo(){
					 //console.log("............"); 
			        let len = 2100/20
			        let c = []
			        for (let i = 0; i < len - (300/20); i++) {
			          let x = (i+300/20)*20
			          c[i] = ((0.0019*(x)+2.62)*(1-0.05*(_self.ty-10))).toFixed(2)
			        }
			        _self.sxChartData.firstyAxisData = _self.sxChartData.firstyAxisData.concat(c)
					_self.yAxis5=_self.sxChartData.firstyAxisData
			      },
			
			      // [2100,3000)
			      zsSxThree(){
			        let c = []
			        for (let i = 0; i <= (3000/20); i++) {
			          let x = (i+2100/20)*20
			          c[i] = ((-0.000004*(x*x)+0.0167*x-10.82)*(1-0.05*(_self.ty-10))).toFixed(2)
			        }
			        _self.sxChartData.firstyAxisData = _self.sxChartData.firstyAxisData.concat(c)
					_self.yAxis5=_self.sxChartData.firstyAxisData
			      },
			
			//title
			getTitie(name){
				uni.setNavigationBarTitle({
					title:name
					
				})
			},
			//油升套压/获得井深和套压
			getWellJsTy(wellId){
				uni.request({
					url:'http://127.0.0.1:9011/zsgl/zscs/getWellJsTy/?id='+wellId,
					data:{},
					success:function(ref){
						_self.JS = ref.data.jx;
						if (_self.JS>0){
						      _self.zsSxOne()
						    }
						if (_self.JS>=300){
						  _self.zsSxTwo()
						}
						if (_self.JS>=2100){
						  _self.zsSxThree()
						}
						let x = []
						for (let i = 0; i < _self.sxChartData.firstyAxisData.length; i++) {
						  x[i] = i*20
						  if (i*20>=3000){
						    break
						  }
						}
						_self.sxChartData.xAxisData = x;
						_self.tempAxis5=_self.sxChartData.xAxisData
						let LineE={
							categories:_self.tempAxis5,
							series:[{
								"name": "柱塞上行速度",
								"data": _self.yAxis5,
							}]	
						};
						_self.showLineE("canvasLineE",LineE);
						
					}
				});
			},
			//柱塞上升速度，套压降幅，，，曲线
			getServerData(wellId){
				let tagUrl = this.$requestUrl.requestUrl('/zs')+'/zsgl/technologyDiagnosis/twelveCyclesData/'+wellId;
				//console.log(tagUrl);
				uni.request({
					url: tagUrl,
					data:{
					},
					success: function(resp) {
						/* console.log("工艺");
							console.log(resp); */
							var ss=resp.data.data;
						if (ss) {
							let allTags1 = []
							let allTags2 = []
							let allTags3 = []
							let allTags4 = []
							let allTagsC = []
							let allTagsCC = []
							let allTagsD = []
							let allTagsDD = []
							for (let i = ss.length-1; i >= 0; i--) {
								//上升速度
								allTags1.push(ss[i].openWellTime);
								allTags2.push(ss[i].sxsd);
								//套压降幅
								allTags3.push(ss[i].openWellTime);
								//保留两位小数
								let sss2 = parseFloat(ss[i].tyjf).toFixed(3)
								allTags4.push(ss[i].tyjf);
								//载荷系数
								allTagsC.push(ss[i].openWellTime);
								allTagsCC.push(ss[i].openWellPayload);
								//水产差压
								allTagsD.push(ss[i].openWellTime);
								allTagsDD.push(ss[i].csyc);
								
							}
							_self.yAxis1=allTags2
							_self.tempAxis=allTags1
							_self.yAxis2=allTags4
							_self.tempAxis2=allTags3
							_self.tempAxis3=allTagsC
							_self.yAxis3=allTagsCC
							_self.tempAxis4=allTagsD
							_self.yAxis4=allTagsDD
						};
						let LineA={
							categories: _self.tempAxis,
							series:[{
							"name": "柱塞上升速度",
							"data": _self.yAxis1,
							}]	
						};
						let LineB={
							categories:_self.tempAxis2,
							series:[{
								"name": "套压降幅",
								"data": _self.yAxis2,
							}]	
						};
						let LineC={
							categories:_self.tempAxis3,
							series:[{
								"name": "负荷系数",
								"data": _self.yAxis3,
							}]	
						};
						let LineD={
							categories:_self.tempAxis4,
							series:[{
								"name": "水产差压",
								"data": _self.yAxis4,
							}]	
						};
						
						_self.showLineA("canvasLineA",LineA);
						_self.loadingB=false;
						_self.loadingA=false;
						_self.showLineB("canvasLineB",LineB);
						_self.showLineC("canvasLineC",LineC);
						_self.showLineD("canvasLineD",LineD);
						
					},
				});	
			},
			
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					colors:['#e72167', '#526c8f'],
					fontSize:13,
					padding:[15,50,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					//enableScroll: true,
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#ff0000',
						gridType:'dash',
						dashLength:8,
						scrollShow:true,
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
						scrollColor:'#ff0000',//默认为 #ff0000
						labelCount: 1,
						disableGrid:true,
						fontSize:12,
					},
					yAxis: {
						
						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						data:[{
							title:"速度(m/min)",
							/* max:_self.pressureAxisMax, */
							min:0,
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
						}]
						
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
			},
			showLineB(canvasId,chartData){
				canvaLineB=new uCharts({
					$this:_self,
							canvasId: canvasId,
							type: 'line',
							colors:['#e72167', '#526c8f'],
							fontSize:13,
							padding:[15,50,0,15],
							legend:{
								show:true,
								padding:5,
								lineHeight:11,
								margin:0,
							},
							
							dataLabel:false,
							dataPointShape:false,
							background:'#FFFFFF',
							pixelRatio:_self.pixelRatio,
							categories: chartData.categories,
							series: chartData.series,
							animation: true,
							//enableScroll: true,
							xAxis: {
								boundaryGap:"center",
								type:'grid',
								gridColor:'#ff0000',
								gridType:'dash',
								dashLength:8,
								scrollShow:true,
								scrollAlign:'left',//滚动条初始位置
								scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
								scrollColor:'#ff0000',//默认为 #ff0000
								labelCount: 1,
								disableGrid:true,
								fontSize:12,
							},
							yAxis: {
								
								splitNumber:5,
								gridType:'dash',
								gridColor:'#CCCCCC',
								dashLength:8,
								showTitle:true,
								data:[{
									title:"载荷系数",
									/* max:_self.pressureAxisMax, */
									min:0,
									titleOffsetY:8,
									titleOffsetX:5,
									tofix: 2,
									position: 'left'
								}]
								
							},
							width: _self.cWidth*_self.pixelRatio,
							height: _self.cHeight*_self.pixelRatio,
							extra: {
								line:{
									type: 'straight'
								}
							}
						});
			},
			showLineC(canvasId,chartData){
				canvaLineC=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					
					colors:['#e72167', '#526c8f'],
					fontSize:13,
					padding:[15,50,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					//enableScroll: true,
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#ff0000',
						gridType:'dash',
						dashLength:8,
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
						scrollColor:'#ff0000',//默认为 #ff0000
						labelCount: 1,
						disableGrid:true,
						fontSize:12,
					},
					yAxis: {
						
						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						data:[{
							title:"MPa",
							//max:_self.pressureAxisMax,
							min:0,
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
						}]
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
			},
			showLineD(canvasId,chartData){
				canvaLineD=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					
					colors:['#e72167', '#526c8f'],
					fontSize:13,
					padding:[15,50,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					//enableScroll: true,
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#ff0000',
						gridType:'dash',
						dashLength:8,
						scrollShow:true,
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
						scrollColor:'#ff0000',//默认为 #ff0000
						labelCount: 1,
						disableGrid:true,
						fontSize:12,
					},
					yAxis: {
						
						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						data:[{
							title:"压力(MPa)",
							/* max:_self.pressureAxisMax,
							min:0, */
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
						}]
						
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						},
						tooltip: {
						            showBox: true,
						            showArrow: true,
						            showCategory: false,
						            borderWidth: 0,
						            borderRadius: 0,
						            borderColor: "#000000",
						            borderOpacity: 0.7,
						            bgColor: "#000000",
						            bgOpacity: 0.7,
						            gridType: "solid",
						            dashLength: 4,
						            gridColor: "#CCCCCC",
						            fontColor: "#FFFFFF",
						            splitLine: true,
						            horizentalLine: false,
						            xAxisLabel: false,
						            yAxisLabel: false,
						            labelBgColor: "#FFFFFF",
						            labelBgOpacity: 0.7,
						            labelFontColor: "#666666"
						          },
						          markLine: {
						            type: "solid",
						            dashLength: 4,
						            data: []
						          }
					}
				});
			},
			showLineE(canvasId,chartData){
				canvaLineE=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					colors:['#e72167', '#526c8f'],
					fontSize:13,
					padding:[15,50,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					//enableScroll: true,
					xAxis: {
						boundaryGap:"center",
						type:'grid',
						gridColor:'#ff0000',
						gridType:'dash',
						dashLength:8,
						scrollShow:true,
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#ff0000',//默认为 #EFEBEF
						scrollColor:'#ff0000',//默认为 #ff0000
						labelCount: 1,
						disableGrid:true,
						fontSize:12,
					},
					yAxis: {
						splitNumber:5,
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						showTitle:true,
						data:[{
							//title:"柱塞上行速度(m/s)",
							title:"速度(m/s)",
							max:_self.pressureAxisMax,
							min:0,
							titleOffsetY:8,
							titleOffsetX:5,
							tofix: 2,
							position: 'left'
						}]
						
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
			},
			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			touchLineB(e) {
				lastMoveTime2=Date.now();
			},
			touchLineC(e) {
				lastMoveTime3=Date.now();
			},
			touchLineD(e) {
				lastMoveTime4=Date.now();
			},
			touchLineE(e) {
				lastMoveTime5=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;
				
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			moveLineB(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime2;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime2 = currMoveTime;
				
				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			moveLineC(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime3;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime3 = currMoveTime;
				
				let currIndex=canvaLineC.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineC.opts.categories.length){
					let riqi=canvaLineC.opts.categories[currIndex];
					let leibie=canvaLineC.opts.series[0].name;
					let shuju=canvaLineC.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineC.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			moveLineD(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime4;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime4 = currMoveTime;
				
				let currIndex=canvaLineD.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineD.opts.categories.length){
					let riqi=canvaLineD.opts.categories[currIndex];
					let leibie=canvaLineD.opts.series[0].name;
					let shuju=canvaLineD.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineD.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			moveLineE(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime5;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime5 = currMoveTime;
				
				let currIndex=canvaLineE.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineE.opts.categories.length){
					let riqi=canvaLineE.opts.categories[currIndex];
					let leibie=canvaLineE.opts.series[0].name;
					let shuju=canvaLineE.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineE.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineB(e){
				let currIndex=canvaLineB.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineB.opts.categories.length){
					let riqi=canvaLineB.opts.categories[currIndex];
					let leibie=canvaLineB.opts.series[0].name;
					let shuju=canvaLineB.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineB.touchLegend(e);
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineC(e){
				let currIndex=canvaLineC.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineC.opts.categories.length){
					let riqi=canvaLineC.opts.categories[currIndex];
					let leibie=canvaLineC.opts.series[0].name;
					let shuju=canvaLineC.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineC.touchLegend(e);
				canvaLineC.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineD(e){
				let currIndex=canvaLineD.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineD.opts.categories.length){
					let riqi=canvaLineD.opts.categories[currIndex];
					let leibie=canvaLineD.opts.series[0].name;
					let shuju=canvaLineD.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineD.touchLegend(e);
				canvaLineD.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineE(e){
				let currIndex=canvaLineE.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineE.opts.categories.length){
					let riqi=canvaLineE.opts.categories[currIndex];
					let leibie=canvaLineE.opts.series[0].name;
					let shuju=canvaLineE.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineE.touchLegend(e);
				canvaLineE.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			},
			sliderMove(e){
				_self.itemCount=e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			tapButton(type){
				let step=5;
				if(type=='in'){
					_self.itemCount -= step;
					if(_self.itemCount<=5){
						_self.itemCount=5;
					}
				}else{
					_self.itemCount += step;
					if(_self.itemCount>=_self.sliderMax){
						_self.itemCount=_self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			formSecondToWord(val){
				let theTime = parseInt(val);// 秒
				let middle = 0;// 分
				let hour = 0;// 小时
	
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
						if (middle > 60) {
							hour = parseInt(middle / 60);
							middle = parseInt(middle % 60);
						}
					}
				let result = ""+parseInt(theTime)+"秒";
				if (middle > 0) {
				result = "" + parseInt(middle) + "分" + result;
				}
				if (hour > 0) {
					result = "" + parseInt(hour) + "小时" + result;
				}
				return result;
			},
			xAxisMax(arr){
				let max = 0;
				for(let i=0 ; i<arr.length-1 ; i++){
					if(arr[i]){
						if(arr[i]>max){
							max = arr[i];
						}
					}
				};
				return max;
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content-B {
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
	}
	.title{
		
		height: 22px;
		font-size: 15px;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #424242;
		line-height: 22px;
		margin-left: 16px;
	}
	.title-B{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #8f8f94;
	}
	
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.charts {
		width: 700upx;
		height: 400upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text{
		width: 50%;
		size: 24rpx;
		font-size: 36rpx;
		color: #565658;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.text2{
		width: 50%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		border-right: solid 1rpx #b7bbc2;
	}
	.text2-B{
		width: 33%;
		font-size: 24rpx;
		font-weight: 200;
		color: #000;
		height: 30rpx;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
	}
	.zsState-A{
		width: 100%;
		text-align: left;
		margin-top: 8px;
		
		font-size: 14px;
		font-weight: bold;
		color: #858585;
		line-height: 22px;
		
	}
	.zsState-B{
		width: 100%;
		text-align: right;
		margin-top: 8px;
		
		font-size: 14px;
		font-weight: bold;
		color: #F09B00;
		line-height: 22px;
	}
	.zsState-C{
		width: 100%;
		size: 24rpx;
		font-size: 36rpx;
		font-weight:600;
		color: #707070;
		width: 100%;
		display: flex;
		justify-content: center;
		border-bottom: solid 1rpx #b7bbc2;
		padding-top: 10rpx;
	}
	.AAA{
		margin-top: 50rpx;
		margin-bottom: 20rpx;
	}
	.AAA-1{
		margin-bottom: 20rpx;
	}
	.BBB{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.CCC{
		height: 50rpx;
	}
	.headline-A{
		width: 4px;
		height: 20px;
		background: #F09B00;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.headline-B{
		width: 90%;
		margin-top: 10px;
	}
	.zsjzt{
		width: 80%;
		display: flex;
		flex-direction:row;
	}
	.yj-A{
		width: 6px;
		height: 6px;
		background: #C4C4C4;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-A2{
		width: 6px;
		height: 6px;
		background: #F02B00;
		opacity: 1;
		margin-left: 10px;
		border-radius: 50%;
	}
	.yj-B{
		width: 40px;
		height: 12px;
		background: #BED57D;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B2{
		width: 40px;
		height: 14px;
		background: #F02B00;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		margin-left: 10px;
		text-align: center;
	}
	.yj-B-text{
		width: 40px;
		font-size: 7px;
		font-weight: 300;
		color: #FFFFFF;
	}
	.yj-B-text2{
		width: 40px;
		font-size: 9px;
		font-weight: 400;
		color: #ff5500;
	}
	.yj-C-text{
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #C3BEBA;
		line-height: 22px;
		margin-left: 8px;
	}
	.yj-C-text2{
		font-size: 14px;
		font-weight: bold;
		color: #727272;
		line-height: 22px;
		margin-left: 8px;
		text-align: center;
	}
	.yj-D-text{
		margin-left: 10px;
		text-align: center;
		
		font-size: 12px;
		font-weight: 400;
		color: #C3BEBA;
		
	}
	.loading1{
		margin-top: 50px;
	}
	.scroll-Y {
		height: 200rpx;
	}
	.scroll-x{
		width: 550rpx;
	}
	.scroll-x2{
		width: 550rpx;
	}
</style>
